/*
  学习目标：
  步骤：
    useRef和useStaste的区别： 
    useRef作用： 作用：创建ref对象，它也是一个钩子函数 场景：
    1. 获取DOM  
    2. 获取组件实例 
    3. 保存数据，如：timerId、其它的数据。 
    useState：    作用：声明状态驱动视图   
    场景： 渲染界面用的数据 区别： 
    1. 需要渲染到界面上的数据，使用useState保存 不需要渲染到界面的上的数据，使用useRef保存。 -如：timerId 
*/
import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import { Card, Breadcrumb, Form, Radio, Button, DatePicker, message, Modal } from 'antd';
import { getArticleList, DeleteById } from 'api/articleList';
import { Table, Tag, Space } from 'antd';
import errorSrc from 'assets/error.png';
import { EditOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
// 自己封装的组件===频道
import Channel from 'components/Channel';
import { useHistory } from 'react-router-dom';
const articleStatus = [
  { id: -1, name: '全部', color: 'magenta' },
  { id: 0, name: '草稿', color: 'orange' },
  { id: 1, name: '待审核', color: 'red' },
  { id: 2, name: '审核通过', color: 'green' },
  { id: 3, name: '审核失败', color: 'cyan' }
];
// const { Option } = Select;
const { RangePicker } = DatePicker;
export default function List() {
  const history = useHistory();
  // 表单信息获取
  const formDataRef = useRef();
  const handleSubmit = value => {
    console.log(value);
    let formData = { ...value };

    // 1，判断status是否为-1，如果为-1，把status键删除，如果不是-1，正常传递数据
    if (formData.status === -1) {
      delete formData.status;
    }

    // 日期范围不是比选的条件，有可能为undefined
    if (formData.data) {
      // 2，将date转化为两个键，begin_pubdate  end_pubdate
      const begin_pubdate = formData.data[0].startOf('day').format('YYYY-MM-DD HH:mm:ss');
      const end_pubdate = formData.data[1].endOf('day').format('YYYY-MM-DD HH:mm:ss');
      // 将后台需要的两个键，拼接带formdate对象中
      formData.begin_pubdate = begin_pubdate;
      formData.end_pubdate = end_pubdate;
      // formData = { ...formData, begin_pubdate, end_pubdate };
    }
    // 调用接口
    delete formData.data;
    console.log('formdata  ----->  ', formData, formDataRef);
    // 保存表单数据 formDataRef.current
    formDataRef.current = formData;

    articleList(formData);
  };
  // 获取频道列表数据
  // 异步请求封装
  // const [channels, setChannels] = useState([]);
  // const handChannels = async () => {
  //   const res = await getChannelsList();
  //   // console.log('17res  ----->  ', res);
  //   setChannels(res.data.channels);
  // };
  // useEffect(() => {
  //   // 调用接口获取数据
  //   handChannels();
  // }, []);
  // 删除数据
  const handelDelById = async id => {
    console.log('删除数据', id);
    // 二次询问
    Modal.confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      async onOk() {
        await DeleteById(id);
        console.log('OK');
        articleList({ ...formDataRef.current, page: articlelist.page, per_page: articlelist.per_page });
        // 提示用户
        message.success('删除数据成功', 1);
      }
    });
    // 更新数据
    // 删除数据时，请求数据，需要重新携带参数，进行请求
    // console.log('formDataRef.page  ----->  ', articlelist.page, articlelist.per_page);
  };

  // 表格数据
  // 异步数据请求的封装
  const [articlelist, setArticlelist] = useState({});
  const articleList = async params => {
    const res = await getArticleList(params);
    console.log('res 30  article ----->  ', res);
    setArticlelist(res.data);
  };
  useEffect(() => {
    articleList({});
  }, []);
  // 分页设置
  // const changePage = (index1, index2) => {
  //   console.log('index  ----->  ', index1, index2);
  // };
  const henderChange = (page, per_page) => {
    console.log('page,per_page  ----->  ', page, per_page);
    articleList({ page, per_page, ...formDataRef.current });
  };
  const columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      render: value => {
        // console.log('cover  ----->  ', cover);
        if (!value.images.length) {
          return <img width={150} src={errorSrc} alt="" />;
        }
        return <img width={150} src={value.images[0]} alt="" />;
      }
    },
    {
      title: '标题',
      dataIndex: 'title'
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: value => {
        const tagInfo = articleStatus.find(item => item.id === value);
        return <Tag color={tagInfo.color}>{tagInfo.name}</Tag>;
      }
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate'
    },
    {
      title: '阅读数',
      dataIndex: 'read_count'
    },
    {
      title: '评论数',
      dataIndex: 'comment_count'
    },
    {
      title: '点赞数',
      dataIndex: 'like_count'
    },
    {
      title: '操作',
      dataIndex: 'like_count',
      render: (value, scode, index) => {
        return (
          <Space>
            <Button
              onClick={() => {
                console.log(scode.id, history);
                history.push('/edit/' + scode.id);
              }}
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
            ></Button>
            <Button onClick={() => handelDelById(scode.id)} shape="circle" danger icon={<DeleteOutlined />}></Button>
          </Space>
        );
      }
    }
  ];

  return (
    <>
      <Card style={{ width: 100 + '%' }}>
        {/* 面包屑 */}
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link to="/home">首页</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>内容管理</Breadcrumb.Item>
        </Breadcrumb>
        {/* 表单内部 onFinish={onFinish} initialValues={{ remember: true }}   onFinishFailed={onFinishFailed}*/}
        <Form style={{ marginTop: 20 }} initialValues={{ status: -1 }} onFinish={handleSubmit}>
          {/* 状态 */}
          <Form.Item label="状态" name="status">
            <Radio.Group>
              <Radio value={-1}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>审核通过</Radio>
              <Radio value={3}>审核失败</Radio>
            </Radio.Group>
          </Form.Item>

          {/* 频道 */}
          {/* <Form.Item label="频道" name="channel_id" initialValue={0}>
            <Select style={{ width: 200 }}>
              {channels.map(item => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item> */}

          {/* 自己封装的组件 */}
          <Form.Item label="频道" name="channel_id" initialValue={0}>
            <Channel></Channel>
          </Form.Item>

          {/* 日期选择 */}
          <Form.Item label="日期选择" name="data">
            <RangePicker />
          </Form.Item>
          {/* 提交按钮 */}
          <Form.Item>
            <Button type="primary" htmlType="submit">
              筛选
            </Button>
          </Form.Item>
        </Form>
        根据筛选条件共查询到{articlelist.total_count}条数据
        <Table
          // 分页设置
          pagination={{
            position: ['bottomCenter'], //分页器的位置
            current: articlelist.page,
            pageSize: articlelist.per_page,
            total: articlelist.total_count,
            // 每页大小 或者 页码 改变时，触发的事件
            onChange: henderChange
          }}
          // 对应数据的渲染
          columns={columns}
          //与渲染数据的部分对应的数据
          dataSource={articlelist.results}
          // 4. 使用rowKey告诉atnd的表格，使用dataSource对象中，id作为每个行数据的key
          rowKey="id"
        />
      </Card>
    </>
  );
}
